<template>
  <div>
    <el-dialog style="height: 100vh;" title="组织分配" :close-on-click-modal="false" :visible.sync="visible" center>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <div style="height: calc(80vh - 150px);overflow: auto;">
        <el-tree ref="orgTree" :data="treeData" :default-checked-keys="checkedKeys"
          :check-strictly="false" :props="defaultProps" class="filter-tree" node-key="id" highlight-current
          show-checkbox default-expand-all />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatePermession(roleId)" :loading="ischeck" v-prevent-re-click>更 新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    fetchRoleTree,
    permissionUpdOrg,
    getRoleByOrg
  } from '@/api/admin/role'
  import { fetchOrg} from '@/api/admin/org'
  import {
    fetchMenuTree
  } from '@/api/admin/menu'

  export default {
    data() {
      return {
        dialogPermissionVisible: false,
        visible: false,
        ischeck: false,
        fullscreenLoading: false,
        dsTypeOptions: [],
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          value: 'id'
        },
        dataForm: {
          id: '',
          roleName: '',
          roleCode: '',
          roleDesc: '',
          dsType: ''
        },
        roleId: '',
        roleCode: '',
        checkedKeys: []
      }
    },
    components: {},
    computed: {
      ...mapGetters(['bizData'])
    },
    methods: {
      init(row) {
          this.visible = true
          console.log(row)
          let roleId = row.roleId;
          let list = []
          this.userId = row.id
          this.checkedKeys = list
          getRoleByOrg(roleId).then(response =>{
              let lst = response.data.data;
              console.log(response.data)
              lst.forEach(item => {
                  console.log(item)
                  list.push(item.orgId)
              })
              fetchOrg().then(response => {
                  this.treeData = response.data.data
                  console.log(this.treeData)
                  // 解析出所有的太监节点
                  this.checkedKeys = this.resolveAllEunuchNodeId(this.treeData, this.checkedKeys, [])
                  this.dialogPermissionVisible = true
                  this.roleId = row.roleId
                  this.roleCode = row.roleCode
              })
          })

      },
      /**
       * 解析出所有的太监节点id
       * @param json 待解析的json串
       * @param idArr 原始节点数组
       * @param temp 临时存放节点id的数组
       * @return 太监节点id数组
       */
      resolveAllEunuchNodeId(json, idArr, temp) {
        for (let i = 0; i < json.length; i++) {
          const item = json[i]
          // 存在子节点，递归遍历;不存在子节点，将json的id添加到临时数组中
          if (item.children && item.children.length !== 0) {
            this.resolveAllEunuchNodeId(item.children, idArr, temp)
          } else {
            temp.push(idArr.filter(id => id == item.id))
          }
        }
        return temp
      },
      updatePermession(roleId) {
        console.log(this.$refs.orgTree.getCheckedKeys().join(',').concat(',').concat(this.$refs.orgTree.getHalfCheckedKeys()
          .join(',')))
        this.orgIds = ''
        this.orgIds = this.$refs.orgTree.getCheckedKeys().join(',').concat(',').concat(this.$refs.orgTree.getHalfCheckedKeys()
          .join(','))
          permissionUpdOrg(roleId, this.orgIds).then(() => {
          this.visible = false
          this.$store.dispatch('GetOrg', {
            type: false
          })
          this.$message.success('修改成功')
        })
      }
    }
  }
</script>
